<template>
  <div class="content">
    <button style="width: 200px; margin: 10px" @click="toggle">显示</button>
    <div class="toggle" v-show="flag">
      <div>
        <button @click="Autolink()" style="width: 200px; margin: 10px">
          自动链接
        </button>
      </div>

      <span>请输入你的server url</span>

      <div class="contentinput">
        <el-input
          style="width: 40%; margin-top: 10px"
          placeholder="ip地址"
          v-model="inputvalue"
          clearable
        >
        </el-input>
        :
        <el-input
          style="width: 20%; margin-top: 10px"
          placeholder="端口"
          v-model="port"
          clearable
        >
        </el-input>
        <button @click="setinputtIP()">确定</button>
        <!-- <button @click="Twoput()">确定2</button> -->
      </div>
    </div>
    <div>
      <el-input
        style="width: 40%; margin-top: 10px"
        placeholder="请输入设备的ip地址"
        v-model="inputIp"
        clearable
        @keyup.enter.native="checkIp"
      >
      </el-input>
    </div>
  </div>
  <!-- <el-input
		style="width: 50%;margin-top: 10px;"
		  placeholder="物体地址前缀"
		  v-model="Addressprefix"
		  @change="clickprefix()"
		  clearable>
		</el-input>
	    </div> -->
</template>
<script>
// const utils =require('../../utils.js');
import axios from "axios";
import Bus from "./eventBus";
import { request } from "@/utils/request.js";
export default {
  data() {
    return {
      ip: "",
      inputvalue: this.$store.state.TextIp,
      port: this.$store.state.port,
      Addressprefix: this.$store.state.Addressprefix,
      diz: "",
      textMap: "",
      flag: false,
      // equmentIp: '192.168.10.112',
      inputIp: "",
      mark: false,
      equipmentIp: location.hostname,
    };
  },

  computed: {},

  mounted() {
    // this.getActor()
  },

  methods: {
    clickprefix() {
      this.$store.commit("setAddressprefix", this.Addressprefix);
      this.UpMaps();
    },

    setinputtIP() {
      let demo = "http://" + this.inputvalue + ":" + this.port;
      this.diz = demo;

      this.$store.commit("setuserinputIP", demo); //api接口的地址
      // alert(demo)

      // this.axios.get("http://192.168.10.160:30010/remote/presets").then((res)=>{
      // 	alert('成功')

      // 	console.log(res)
      // }).watch((err)=>{
      // 	alert("失败")
      // 	console.log(err)
      // if(this.inputvalue != ''){

      // 	this.Autolink()
      // }else{
      // 	alert("链接失败")
      // }

      // })

      if (demo.length >= 20) {
        this.axios.get(demo + "/remote/presets").then(
          (res) => {
            this.$store.commit("setipTips", true);

            this.$store.commit("setTextIp", this.inputvalue); //ip
            this.$store.commit("setport", this.port); //端口号
            this.$store.commit("setuserinputIP", demo); //api接口的地址
            this.getActor(demo);
            // console.log("111111111")
          }, // 成功

          (err) => {
            this.$store.commit("setipTips", false);
            alert("链接失败2");
          } // 失败
        );
      } else {
        alert("链接失败1");
        this.$store.commit("setipTips", false);
      }

      // utils.sendThis(this);
    },

    // 点击自动连接按钮触发该函数
    /* 
                1、点击自动连接按钮发送 get 请求
                请求成功
                    1.1 将 store 中 userinputIP 设置为 localhost
                    1.2 调用 getActor 函数发送 put 请求如果请求成功将 store 中 objectPath 的值设置为请求成功后的返回值，如果请求失败代表获取地图物体路径失败
                    1.3 将 store 中 ipTips 的值设置为 true
                请求失败
                    将 store 中 ipTips 设为 false 并提示连接失败
            */

    Autolink() {
      this.axios({
        method: "get",
        url: "/remote/presets",
      }).then(
        (res) => {
          // 将store 中 userinputIP 设置为 localhost
          this.$store.commit("setTextIp", "localhost"); //ip
          this.getActor();
          // 将store 中的 ipTips 设置为 true
          this.$store.commit("setipTips", true);
          // console.log(this.$store.state.userinputIP)
          // console.log("111111111")
        },
        (err) => {
          this.$store.commit("setipTips", false);
          // console.log(this.$store.state.userinputIP)
          alert("链接失败1");
        }
      );
    },

    getActor(demo) {
      // let demo = "http" + "://" + this.inputvalue + ':' + this.port
      this.axios
        .put(
          "/remote/object/call",
          {
            objectPath:
              "/Script/EditorScriptingUtilities.Default__EditorLevelLibrary",
            functionName: "GetAllLevelActors",
          },
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        )
        .then(
          (res) => {
            console.log("链接成功");
            console.log(res.data);
            this.$store.commit("serObjectPath", res.data); //更新 store 中的 ObjectPath
            let test = res.data.ReturnValue[1];
            this.UpMaps();

            if (this.textMap != "") {
              let textMaptrue = true;
              this.$store.commit("setaddproperties", textMaptrue); // 识别是哪几种的 temp 或 game
            }
          },
          (err) => {
            // console.log("获取地图物体路径失败")
            console.log(err.message);
          }
        );
    },

    Twoput() {
      this.axios
        .put(
          "/object/call",
          {
            objectPath:
              "/Script/EditorScriptingUtilities.Default__EditorLevelLibrary",
            functionName: "GetAllLevelActors",
          },
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        )
        .then(
          (res) => {
            console.log(res);
          },
          (err) => {
            console.log("shibai?2");
          }
        );
    },

    toggle(e) {
      this.flag = !this.flag;
      if (this.flag) {
        e.target.innerHTML = "隐藏";
      } else {
        e.target.innerHTML = "显示";
      }
    },

    //检查设备 IP
    async checkIp() {
      try {
        //发请求将输入的 IP 发送到服务端验证
        let { data: result } = await request.get("/api/saveIp", {
          params: {
            ip: this.inputIp,
          },
          timeout: 1000,
        });

        if (result.includes("500 connection info:")) {
          //输入 ip 正确
          this.$router.replace("/PlaySetup");
          sessionStorage.setItem("equipmentIp", this.inputIp);
        } else {
          //输入 ip 错误
          this.$message({ message: "Ip地址错误", type: "warning" });
        }
      } catch (error) {
        this.$message({
          message: "请求超时,请查看地址是否正确",
          type: "warning",
        });
      }
    },

    // async validateIp() {
    //   console.log(this.inputIp);
    //   // 该请求的目的是动态的绑定 ip 地址
    //   let { data } = await axios.get(
    //     "http://" + this.equipmentIp + ":3000/api/modifyIp",
    //     {
    //       params: {
    //         ip: this.inputIp,
    //       },
    //     }
    //   );

    //   console.log(data);

    //   // 该请求的目的是触发 tcp 服务其与设备的连接如果 输入错误的ip地址就会返回 ['']
    //   // let { data:result } = await axios.get('http://'+this.equipmentIp+':3000/api/getData',{
    //   //     params:{
    //   //         instructions:'clips get'
    //   //     }
    //   // })

    //   if (data[0] == "") {
    //     this.inputIp = "";
    //     return this.$alert("您输入的设备ip不正确请从新输入");
    //   }

    //   sessionStorage.setItem("equipmentIp", this.inputIp);
    //   this.$router.push("/PlaySetup");
    //   this.mark = !this.mark;
    //   // 触发 Aside 组件中的 toggleButton 事件
    //   Bus.$emit("toggleButton", this.mark);
    // },
  },
};
</script>

<style scoped="scoped">
.content span {
  width: 100%;
  color: #f0f8ff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content button {
  height: 40px;
  border-radius: 10px;
  background-color: #fff;
  margin-left: 10px;
  width: 20%;
}

.contentinput {
  color: #ffffff;
}

.jskj {
  width: 30px;
  height: 30px;
  background-color: aqua;
}
</style>